<template>
	<view class="container">
		<!--header-->
		<view class="tui-header">
			<view class="tui-category" hover-class="opcity" :hover-stay-time="150" @tap="category">
				<tui-icon name="manage-fill" color="#fff" :size="22"></tui-icon>
				<view class="tui-category-scale">分类</view>
			</view>
			<view class="tui-rolling-search" @tap="search">
				<tui-icon name="search" color="#333" :size="22"></tui-icon>
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item v-for="(item,index) in top_search_list" :key="index" class="tui-swiper-item">
						<view class="tui-hot-item">{{item.name}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!--header-->
		<mescroll-uni :down="downOption" @down="downCallback" @up="upCallback">	
			<view class="tui-header-banner">
				<view class="tui-hot-search">
					<view>热搜</view>
					<view class="tui-hot-tag" v-for="(item,index) in top_search_list" :key="index">{{item.name}}</view>
				</view>
				<view class="tui-banner-bg">
					<view class="tui-primary-bg tui-route-left"></view>
					<view class="tui-primary-bg tui-route-right"></view>
					<!--banner-->
					<view class="tui-banner-box">
						<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="tui-banner-swiper"
						 :circular="true">
							<swiper-item v-for="(item,index) in crousel_list" :key="index">
								<view class="tui-banner-title"></view>
								<image :src="item.image_url" class="tui-slide-image" mode="scaleToFill" @tap="swiper_click" :data-index="index"/>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		
			<!-- 分类 -->
			<view class="tui-product-category">
				<view class="tui-category-item" v-for="(item,index) in product_type_list" :key="index" :data-index="index" @tap="product_list_click">
					<image :src="item.image_url" class="tui-category-img" mode="scaleToFill"></image>
					<view class="tui-category-name">{{item.title}}</view>
				</view>
			</view>
			<!-- 分类 -->
			
			
			<!-- 精品推荐 -->
			<view v-if="recommend_product_list.length" class="tui-product-box tui-pb-20 tui-bg-white">
				<view class="tui-group-name" @tap="recommend_list" data-type="1">
					<text>精品推荐</text>
					<tui-icon name="arrowright" :size="20" color="#555"></tui-icon>
				</view>
				<view class="tui-new-box">
					<view class="tui-new-item" :class="[index!=0 && index!=1 ?'tui-new-mtop':'']" v-for="(item,index) in recommend_product_list"
					 :key="index" @tap="product_detail" :data-id="item.id">
						<image :src="'../../static/images/new/'+'new'+'.png'" class="tui-new-label"></image>
						<view class="tui-title-box">
							<view class="tui-new-title">{{item.name}}</view>
							<view class="tui-new-price">
								<text class="tui-new-present">￥{{item.money}}</text>
								<text class="tui-new-original">￥{{item.bazaar_money}}</text>
							</view>
						</view>
						<image :src="item.image_url" class="tui-new-img"></image>
					</view>
				</view>
			</view>
			<!-- 精品推荐 -->
			
			<!-- 热卖单品 -->
			<view v-if="best_product_list.length" class="tui-product-box tui-pb-20 tui-bg-white">
				<view class="tui-group-name" @tap="recommend_list" data-type="2">
					<text>热卖单品</text>
					<tui-icon name="arrowright" :size="20" color="#555"></tui-icon>
				</view>
				<view class="tui-new-box">
					<view class="tui-new-item" :class="[index!=0 && index!=1 ?'tui-new-mtop':'']" v-for="(item,index) in best_product_list"
					 :key="index" @tap="product_detail" :data-id="item.id">
						<image :src="'../../static/images/new/'+'new'+'.png'" class="tui-new-label"></image>
						<view class="tui-title-box">
							<view class="tui-new-title">{{item.name}}</view>
							<view class="tui-new-price">
								<text class="tui-new-present">￥{{item.money}}</text>
								<text class="tui-new-original">￥{{item.bazaar_money}}</text>
							</view>
						</view>
						<image :src="item.image_url" class="tui-new-img"></image>
					</view>
				</view>
			</view>
			<!-- 热卖单品 -->
			
			
			<view class="tui-product-box">
				<view class="tui-group-name">
					<text>热门推荐</text>
				</view>
				<view class="tui-product-list">
					<view class="tui-product-container">
						<block v-for="(item,index) in product_list" :key="index" v-if="(index+1)%2!=0">
							<!--商品列表-->
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="product_detail" :data-id="item.id">
								<image :src="item.image_url" class="tui-pro-img" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{item.name}}</view>
									<view>
										<view class="tui-pro-price">
											<text class="tui-sale-price">￥{{item.money}}</text>
											<text class="tui-factory-price">￥{{item.bazaar_money}}</text>
										</view>
										<view class="tui-pro-pay">{{item.sales}}人付款</view>
									</view>
								</view>
							</view>
							<!--商品列表-->
							
						</block>
					</view>
					<view class="tui-product-container">
						<block v-for="(item,index) in product_list" :key="index" v-if="(index+1)%2==0">
							<!--商品列表-->
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="product_detail" :data-id="item.id">
								<image :src="item.image_url" class="tui-pro-img" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit">{{item.name}}</view>
									<view>
										<view class="tui-pro-price">
											<text class="tui-sale-price">￥{{item.money}}</text>
											<text class="tui-factory-price">￥{{item.bazaar_money}}</text>
										</view>
										<view class="tui-pro-pay">{{item.sales}}人付款</view>
									</view>
								</view>
							</view>
							<!--商品列表-->
							
						</block>
					</view>
				</view>
			</view>
		</mescroll-uni>		
	</view>
</template>
<script>
	import tuiIcon from "@/components/icon/icon.vue"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import Index from './index-model.js'   
	var index = new Index();  
	export default {
		components: {
			tuiIcon,
			MescrollUni
		},
		data() {
			return {
				downOption: {},
				total:0,
				// 轮播图
				crousel_list:[],
				//精品推荐
				recommend_product_list:[],
				//热卖单品
				best_product_list:[],
				//商品页码
				page:1,
				//商品列表
				product_list:[],
				//商品分类
				product_type_list:[],
				//热搜列表
				top_search_list:[]
			}
		},
		onShow() {
			this.my();
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				try{
					var that = this;
					that.page = 1;
					that.baner_list();
					that.top_search();
					that.product_type();
					that.recommend_product();
					that.best_product();
				} catch (e) {
					mescroll.endErr();
				}
				mescroll.resetUpScroll();
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
					var that = this;
					that.product((res)=>{
						mescroll.endBySize(res.data.length, res.total);
					})
			},
			//轮播图
			baner_list(){
				var that = this;
				index.baner_list((res)=>{
					if(res.code == 8888){
						that.crousel_list = res.data;
					}
				});
			},
			
			//商品分类
			product_type(){
				var that = this;
				index.product_type_list((res)=>{
					if(res.code == 8888){
						that.product_type_list = res.data;
					}
				});
			},
			
			//热搜列表
			top_search(){
				var that = this;
				index.top_search_list((res)=>{
					if(res.code == 8888){
						that.top_search_list = res.data;
					}
				});
			},
			//精品推荐
			recommend_product(){
				var that = this;
				index.recommend_product_list((res)=>{
					if(res.code == 8888){
						that.recommend_product_list = res.data;
					}
				});
			},
			//跳转精品推荐和热卖单品列表
			recommend_list(e){
				var that = this;
				var type = index.get_data_set(e,'type');
				index.navigate_to('../recommend_product_list/recommend_product_list?type='+type);
			},
			//热卖单品
			best_product(){
				var that = this;
				index.best_product_list((res)=>{
					if(res.code == 8888){
						that.best_product_list = res.data;
					}
				});
			},
			//商品列表
			product(callback){
				var that = this;
				index.product_list(that.page,(res)=>{
					if(res.code == 8888){
						if(res.data.current_page == 1){
							that.product_list = res.data.data;
							that.total = res.data.total;
						}else{
							for(var i=0;i<res.data.data.length;i++){
								that.product_list.push(res.data.data[i]);
							}
						}
					}
					if(callback){
						if(that.page < res.data.last_page){
							that.page = that.page + 1;
						}
						callback(res.data);
					}
				});
			},
			//轮播图跳转
			swiper_click(e){
				var that = this;
				var index1 = index.get_data_set(e,'index');
				var product_status = that.crousel_list[index1].product_status;
				if(product_status == 2){
					index.navigate_to('../product_detail/product_detail?id='+that.crousel_list[index1].product_id);
				}else if(product_status == 1){
					index.navigate_to('../swiper_detail/swiper_detail?id='+that.crousel_list[index1].id);
				}
			},
			//跳转分类
			category(){
				index.switch_tab('../category/category');
			},
			//跳转搜索
			search(){
				index.navigate_to('../search/search')
			},
			product_list_click(e){ 
				var that = this;
				var product_type_id = that.product_type_list[index.get_data_set(e,'index')].id;
				var product_type_name = that.product_type_list[index.get_data_set(e,'index')].title;
				index.navigate_to('../product_list/product_list?product_type_id='+product_type_id+'&product_type_name='+product_type_name);
			},
			//跳转商品详情
			product_detail(e){ 
				var id = index.get_data_set(e,'id');
				index.navigate_to('../product_detail/product_detail?id='+id);
			},
			my(){
				index.my((res)=>{
					if(res.code==8888){
						if(res.data.status_num>99){
							res.data.status_num = '99';
						}
						if(res.data.cart_count>99){
							res.data.cart_count = '99';
						}
						if(res.data.status_num>0){
							uni.setTabBarBadge({
							  index: 3,
							  text:res.data.status_num
							})
						}else{
							uni.removeTabBarBadge({
							  index: 3
							})
						}
						if(res.data.cart_count>0){
							uni.setTabBarBadge({
							  index: 2,
							  text:res.data.cart_count
							})
						}else{
							uni.removeTabBarBadge({
							  index: 2
							})
						}
					}
				})
			}
		}
	}
</script>
<style>
	@import url("index.css");
</style>
